import React from "react";
import { useRoutes, RouteObject, Navigate } from "react-router-dom";

import Todos from "pages/Todos";
import About from "pages/About";
import Main from "pages/Main";
import Feedback from "pages/About/Feedback";
import Instructions from "pages/About/Instructions";
import DevPlan from "pages/About/DevPlan";
import SelfIntro from "pages/About/SelfIntro";
import Search from "pages/Search";
import SearchDefault from "pages/Search/SearchDefault";
import SearchContent from "pages/Search/SearchCotent";
import RelatedTech from "pages/About/RelatedTech";
import UpdateLog from "pages/About/UpdateLog";
import Settings from "pages/Settings";

const Router: React.FC = () => {
  const routes: RouteObject[] = [
    {
      path: "/",
      element: <Main />,
      children: [
        {
          path: "",
          element: <Todos />,
        },
        {
          path: "search",
          element: <Search />,
          children: [
            {
              path: '',
              element: <SearchDefault />
            },
            {
              path: 'content',
              element: <SearchContent />,
            }
          ]
        },
        {
          path: "about",
          children: [
            {
              path: "",
              element: <About />,
            },
            {
              path: "feedback",
              element: <Feedback />,
            },
            {
              path: "instructions",
              element: <Instructions />,
            },
            {
              path: "self-intro",
              element: <SelfIntro />,
            },
            {
              path: "related-tech",
              element: <RelatedTech/>
            },
            {
              path: "dev-plan",
              element: <DevPlan />,
            },
            {
              path: "update-log",
              element: <UpdateLog />,
            },
          ],
        },
        {
          path: "settings",
          element: <Settings />,
        },
      ]
    },
    {
      path: "*",
      element: <Navigate to="/" />,
    },
  ];
  return useRoutes(routes);
};

export default Router;
